// 获取学生信息
async function renderStudent() {
    const{data:res} = await axios.get('/students');
    // console.log(res);
    let arr = res.data.map(item => {
        return `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender? 0 : 1}</td>
        <td>${item.group}</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;"  class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;"  class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr> 
        `
    });
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()

// 初始化模态框
let addModel = new bootstrap.Modal(document.querySelector('.modal '));

// ----------------------------------点击加号按钮，显示模态框---------------------
document.querySelector('#openModal').addEventListener('click', async function(e){
    // 执行修改操作，改变模态框标题
    document.querySelector('.modal-header h5').innerHTML = '添加学员';
    // 重置表单
    document.querySelector('#form').reset();
    // 显示模态框
    addModel.show();
});

// --------------------------------省市县联动-----------------------------------
async function initCity() {
    let province = document.querySelector('[name="province"]');
    let city = document.querySelector('[name="city"]');
    let area = document.querySelector('[name="area"]');
    const{data:res} = await axios.get('/api/province');
    // console.log(res);
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`);
    province.innerHTML = `<option value="">--省份--</option>` + arr.join('');
    // 获取市
    province.addEventListener('change',async function() {
        let pname = province.value;
        area.innerHTML = `<option value="">--地区--</option>`;
        city.innerHTML = `<option value="">--城市--</option>`;
        const{data:res1} = await axios.get('/api/city',{params:{pname}});
        let arr1 = res1.data.map(item => `<option value="${item}">${item}</option>`);
        city.innerHTML = `<option value="">--城市--</option>` + arr1.join('')
    });
    // 获取县
    city.addEventListener('change',async function() {
        let pname = province.value;
        let cname = city.value;
        const{data:res2} = await axios.get('/api/area',{params:{pname,cname}});
        let arr2 = res2.data.map(item => `<option value="${item}">${item}</option>`);
        area.innerHTML = `<option value="">--地区--</option>` + arr2.join('')
    })
}
initCity();

// -------------------------------------点击模态框的确认按钮，提交表单数据----------------------------
document.querySelector('#submit').addEventListener('click', async function () {
    // 获取表单各个元素的值
    let data = val(document.querySelector('#form'))
    // console.log(data)
    // 根据接口要求，数字类型的，必须用纯数字，不能使用 '20'
    data.age = +data.age // 如果使用 + 的方式转换，注意 +和变量 挨在一起
    data.gender = Number(data.gender)
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    // console.log(data) // 此次查看，数据完全符合接口要求了，下面可以提交了
    // 点击弹出层中的确认的时候，根据弹出层中的标题判断一下，是添加操作还是修改操作
    let title = document.querySelector('.modal-title').innerHTML
    if (title === '添加学员') {
      const { data: res } = await axios.post('/students', data)
      message.success(res.message) // 使用插件提示
      addModel.hide() // 关闭弹出层
      renderStudent() // 更新页面数据
    } else if (title === '修改学员') {
      let id = document.querySelector('.modal-title').dataset.id
      // 发送请求，进行修改
      const { data: res } = await axios.put(`/students/${id}`, data)
      message.success(res.message) // 使用插件提示
      addModel.hide() // 关闭弹出层
      renderStudent() // 更新页面数据
    }
  })

// ---------------------------------------删除操作 | 编辑操作----------------------------------
document.querySelector('tbody').addEventListener('click', async function(e) {
    
    // 判断点击的是不是删除按钮
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        if (!confirm('确认是否删除')){return};
        try {
            const{data:res} = await axios.delete(`/students/${id}`);
            message.success('删除成功');
            renderStudent();
        }catch(e) {
            message.error('删除失败');
        }
    }

    // 判断是不是编辑按钮
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        // 执行修改操作，改变模态框标题
        document.querySelector('.modal-header h5').innerHTML = '修改学员';
        // 给h5添加自定义id
        document.querySelector('.modal-header h5').setAttribute('data-id',id)

        // 说明点击了编辑
        addModel.show() // 显示模态框
        // 根据id，获取当前这个学员的详细信息
        const { data: res } = await axios.get(`/students/${id}`)
        // console.log(res)
        // 获取市和县，获取后，渲染到对应的下拉框之后，才能数据回填
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
        const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2])
        console.log(c, a)
        // [{ data: { data: c } }, { data: { data: a } }]
        let arr2 = c.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')
      
        let arr3 = a.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')
        // val(表单) // 获取表单各项数据
        // val(表单, 数据) // 数据回填。把数据回填到表单中【要求数据的键 ==== 表单各项的name属性值】
        val(document.querySelector('#form'), res.data)
      }
})
